<template>
  <div class="parking-status">
    <el-table :data="parkingData" border style="width: 100%">
      <el-table-column prop="area" label="区域" width="120"></el-table-column>
      <el-table-column prop="roadName" label="道路名称" width="150"></el-table-column>
      <el-table-column prop="parkingLotName" label="停车场名称" width="180"></el-table-column>
      <el-table-column prop="totalSpaces" label="总泊位数" width="120"></el-table-column>
      <el-table-column prop="occupiedSpaces" label="在使用泊位数" width="120"></el-table-column>
      <el-table-column prop="availableSpaces" label="未使用泊位数" width="120"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'ParkingLotStatus',
  data() {
    return {
      parkingData: [
        {
          area: '城东区',
          roadName: '东大街',
          parkingLotName: '东大街停车场',
          totalSpaces: 100,
          occupiedSpaces: 75,
          availableSpaces: 25
        },
        // 可以添加更多数据
      ]
    }
  },
  methods: {
    // 获取停车场数据的方法
    fetchParkingData() {
      // 这里添加获取数据的API调用
      // this.axios.get('/api/parking-status').then(response => {
      //   this.parkingData = response.data
      // })
    }
  },
  created() {
    // 组件创建时获取数据
    this.fetchParkingData()
  }
}
</script>

<style scoped>
.parking-status {
  padding: 20px;
}
</style>
